<template>
  <div>
    <el-tabs>
      <el-tab-pane label="验证码登录" name="first">
        <el-form label-width="120px" :model="loginForm">
          <el-form-item label="手机号">
            <el-input v-model="loginForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="loginForm.telCode"></el-input>
            <el-button @click="getCode">发送验证码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="普通登录" name="second">
        <el-form label-width="120px" :model="loginForm">
          <el-form-item label="账号">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="userLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'LoginView',
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        tel: '',
        codeKey: '',
        telCode: ''
      }
    }
  },
  methods: {
    userLogin () {
      this.axios.post('/user/userLogin', this.loginForm).then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.jdata.token)
          this.$store.commit('setUserInfo', res.data.jdata.userInfo)
          this.$message.success('登陆成功')
          this.$router.push('/list')
        }
      })
    },
    login () {
      this.axios.post('/user/mylogin', this.loginForm).then(res => {
        if (res.data.code === 200) {
          this.$store.commit('setToken', res.data.jdata.token)
          this.$store.commit('setUserInfo', res.data.jdata.userInfo)
          this.$message.success('登陆成功')
          this.$router.push('/list')
        } else if (res.data.code === 201) {
          this.$message.error('手机号错误')
        } else if (res.data.code === 202) {
          this.$message.error('验证码错误')
        }
      })
    },
    getCode () {
      this.loginForm.codeKey = uuidv4()
      this.axios.post('/user/getCode', this.loginForm).then(res => {
        if (res.data.code === 200) {
          this.$message.success('获取成功')
        } else if (res.data.code === 201) {
          this.$message.error('用户不存在')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
